<template>
  <div style="width: 600px;">
    <h3>编辑商品详情</h3>
    <rich-text v-model="htmlText"></rich-text>
    <div class="btn">
      <Button @click="goBack" type="primary">上一步</Button>
      <Button @click="nextStep" type="ghost">下一步，确认商品信息</Button>
      <Button @click="getPhone" type="primary" style="float: right;">预览</Button>
    </div>
    <Modal v-model="showPhone" :styles="{top: '10px'}">
      <div id="phone" v-html="htmlText"></div>
    </Modal>
  </div>
</template>

<script>
import richText from './richText'
export default {
  name: 'detail-step',
  components: {
    richText
  },
  data () {
    return {
      htmlText: '',
      showPhone: false
    }
  },
  methods: {
    goBack () {
      /*
      * 返回上一步
      * */
      this.$emit('goBack')
    },

    nextStep () {
      /*
      * 编辑完成，进入信息确认
      * 通知父组件，带过信息过去
      * */
      this.$emit('nextStep', this.htmlText)
    },

    getPhone () {
      /*
      * 预览商品详情
      * 显示模拟手机
      * */
      document.getElementById('phone').innerHTML = this.htmlText
      this.showPhone = true
    },

    clearRichText () {
      /*
      * 清除富文本数据
      * */
      this.htmlText = ''
    }
  },
  created () {
  }
}
</script>

<style scoped>
  .btn{
    padding-top: 16px;
    border-top: 1px solid #dddee1;
    margin-top: 16px;
  }
  #phone{
    width: 340px;
    height: 600px;
    padding: 10px;
    border-radius: 20px;
    margin: 0 auto;
    border: 1px solid #000;
    overflow-y: auto;
  }
</style>
